<template>
  <div>
    <!-- 面包屑 -->
    <div class="home-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >知识图库</el-breadcrumb-item>
        <el-breadcrumb-item >专家知识库概览</el-breadcrumb-item>
        <el-breadcrumb-item >
          <router-link to="/konwledgeGraph/proProcess">生产工艺</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item >工艺编辑</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="pprocess-content">

      <div class="pprocess-content-header">
        <!-- 名称 -->
        <div class="pprocess-content-header-name">
          <span>名称：</span>
          <el-input v-model="kMaintainVO.kname" size="medium" placeholder="请输入内容" :style="{width:200+'px'}"></el-input>
        </div>

        <!-- 类型 -->
        <div class="pprocess-content-header-kind">
          <span>类型：</span>
          <el-tag
            :key="tag"
            effect="dark"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <i class="iconfont pprocess-content-icon"  @click="showInput"><a href="#">&#xe71e;</a></i>
        </div>

        <el-button type="primary" @click="onClick">保存</el-button>
      </div>

      <!-- 富文本 -->
      <mce-editor
        v-if="show"
        v-model             = "kMaintainVO.ktext"
        :url                 = "BASE_API+'/file/upload/img'"
        @input              = "onEditorReady"
      >
      </mce-editor>


      <!-- 关系编辑   属性编辑 -->
      <div class="pprocess-content-bottom">
        <!-- 关系编辑 -->
        <div>
          <div class="related-editor">
            <p>关系编辑：</p>
            <i class="iconfont pprocess-content-icon" @click="RelatEditorPopup = true"><el-link type="primary">&#xe71e;</el-link></i>
          </div>
          <!-- 表 -->
          <el-table
            :data="relationVOList"
            border
            height="300"
            style="width: 100%">
            <el-table-column
              prop="entity1"
              label="实体">
            </el-table-column>
            <el-table-column
              prop="relation"
              label="关系">
            </el-table-column>
            <el-table-column
              prop="entity2"
              label="实体">
            </el-table-column>
            <el-table-column
              type="index"
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="deleteRelat(scope.$index)"><i class="iconfont">&#xe614;</i></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 属性编辑 -->
        <div>
          <div class="related-editor">
            <p>属性编辑：</p>
            <i class="iconfont pprocess-content-icon" @click="AttributEditorPopup = true"><el-link type="primary">&#xe71e;</el-link></i>
          </div>
          <!-- 表 -->
          <el-table
            :data="attributeVOList"
            border
            height="300"
            style="width: 100%">
            <el-table-column
              prop="attributename"
              label="名称">
            </el-table-column>
            <el-table-column
              prop="attributetext"
              label="内容">
            </el-table-column>
            <el-table-column
              type="index"
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="deleteAttribut(scope.$index)"><i class="iconfont">&#xe614;</i></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>


      <!-- 关系编辑弹窗 -->
      <el-dialog title="新增关系" :visible.sync="RelatEditorPopup" width="35%" >
        <el-form :model="relatForm">
          <el-form-item label="实体一:" :label-width="formLabelWidth">
            <el-input v-model="relatForm.entity1" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="关系:" :label-width="formLabelWidth">
            <el-input v-model="relatForm.relation" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="实体二:" :label-width="formLabelWidth">
            <el-input v-model="relatForm.entity2" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div style="text-align: right;">
          <el-button type="primary" @click="relateEditorPopupClick">确 定</el-button>
          <el-button @click="RelatEditorPopup = false">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 属性编辑弹窗 -->
      <el-dialog title="新增属性" :visible.sync="AttributEditorPopup" width="35%" >
        <el-form :model="attributForm">
          <el-form-item label="名称:" :label-width="formLabelWidth">
            <el-input v-model="attributForm.name" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="内容:" :label-width="formLabelWidth">
            <el-input v-model="attributForm.content" autocomplete="off"></el-input>
          </el-form-item>

        </el-form>
        <div style="text-align: right;">
          <el-button type="primary" @click="attributEditorPopupClick">确 定</el-button>
          <el-button @click="AttributEditorPopup = false">取 消</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
  import MceEditor from '@/common/components/TceEditor'
  import KMaintainApi from '@/api/kMaintainApi'
  export default{
    data(){
      return{
        // 接口API地址
        BASE_API: process.env.BASE_API,
        value:'',
        form:{
          input_name:''
        },
        show:false,
        // 添加标签
        dynamicTags: [],
        inputVisible: false,
        inputValue: '',

        // 弹窗前字体宽度
        formLabelWidth: '80px',

        // 关系form
        relatForm:{
          entity1:'',
          relation:'',
          entity2:''
        },
        // 属性form
        attributForm:{
          name:'',
          content:'',
        },

        // 关系添加弹窗
        RelatEditorPopup:false,
        // 关系添加弹窗
        AttributEditorPopup:false,

        // 关系编辑
        relationVOList: [],
        // 属性编辑
        attributeVOList: [],
        //
        kMaintainVO:{}
      }
    },
    components:{
      MceEditor
    },
    created() {
      this.getData()
    },
    methods:{
     // 获取数据
     getData(){
       // 获取生产工艺详情
       var kid = this.$route.params.proprocessId
       KMaintainApi.kMaintainQuery(kid).then(res => {
         if(res.data.status === "200"){
           this.kMaintainVO = res.data.data.kMaintainVO
           this.relationVOList = res.data.data.relationVOList
           // 属性类型分割
           this.attributeVOList = res.data.data.attributeVOList

           // 标签
           this.dynamicTags = res.data.data.kMaintainVO.ktype.split(",")
           this.show = true
         }
       })
     },
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      // 添加类型标签
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },

      // 添加关系
      relateEditorPopupClick(){
        // 定义一个新的对象 间接将数据 存入relatData1
        var form = {
          entity1:'',
          relation:'',
          entity2:''
        }
        form.entity1 = this.relatForm.entity1
        form.entity2 = this.relatForm.entity2
        form.relation = this.relatForm.relation
        console.log(form)
        // 将添加的数据存入list
        this.relationVOList.push(form)

        // 清空输入框数据
        this.relatForm.entity1 = ""
        this.relatForm.entity2 = ""
        this.relatForm.relation = ""

        // 关闭弹窗
        this.RelatEditorPopup = false
      },
      // 添加属性
      attributEditorPopupClick(){
        var data = {
          attributename:'',
          attributetext:'',
        }
        data.attributename = this.attributForm.name
        data.attributetext = this.attributForm.content
        // 将添加的数据存入list
        this.attributeVOList.push(data)
        // 清空输入框数据
        this.attributForm.name = ""
        this.attributForm.content = ""
        // 关闭弹窗
        this.AttributEditorPopup = false
      },
      // 删除关系属性
      deleteRelat(index){
        this.relationVOList.splice(index,1)
      },
      // 删除属性
      deleteAttribut(index){
        this.attributeVOList.splice(index,1)
      },
      onEditorReady(res){
        // console.log(res)
      },

      // konwledgeGraph/productprocess/productdetil/90/超细粉碎技术4
      onClick(){
        this.kMaintainVO.ktype = this.dynamicTags.join(",")
        KMaintainApi.kmaintainEdit(this.attributeVOList,this.kMaintainVO,this.kMaintainVO.kid,this.relationVOList).then(res => {
          if(res.data.status === "200"){
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success'
            });
            this.$router.push({
              path:'/konwledgeGraph/productprocess/productdetil/'+res.data.data + '/' + this.kMaintainVO.kname
            })
          }
        })
      }
    }
  }
</script>

<style  scoped="scoped">
  .home-breadcrumb{
    width: 100%;
    height: 30px;
    line-height: 30px;
    margin: 5px;
    font-family: "华文新魏 Bold", "华文新魏";
  }
  .pprocess-content{
    background-color: #FFFFFF;
    padding: 15px;
    border-radius: 7px;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .pprocess-content-bottom{
    display: flex;
    justify-content: flex-start;
  }

  .pprocess-content-bottom div:nth-child(1){
    margin: 15px 50px 15px 10px;
    max-width: 400px;
  }

  .pprocess-content-bottom div:nth-child(2){
    /* flex: 1; */
    max-width: 400px;
    margin: 15px 10px;
  }
  .pprocess-content-header{
    width: 100%;
    padding: 20px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .pprocess-content-header-name{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 30px;
  }
  .pprocess-content-header-kind{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 30px;
  }
  .pprocess-content-icon a{
    font-size: 30px;
    color: gray;
    margin-left: 10px;
  }
  .related-editor{
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
</style>
